<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Test: containing block - absolutely positioned elements inside inline-level relative elements</title>

  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
  <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" />
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <meta content="If the nearest positioned ancestor of an absolutely positioned element is inline-level and direction is 'ltr', then the top and left of the containing block are the top and left padding edges of the first box generated by the ancestor, and the bottom and right are the bottom and right padding edges of the last box of the ancestor" name="assert" />
  <meta content="ahem" name="flags" />

  <style type="text/css"><![CDATA[
  div
  {
  color: red;
  direction: ltr;
  font: 100px/2 Ahem;
  width: 4em;
  }

  span {position: relative;}

  span span
  {
  background-color: green;
  height: 1em;
  position: absolute;
  width: 1em;
  }

  #top-left
  {
  left: 0;
  top: 0;
  }

  #top-right
  {
  right: 0;
  top: 0;
  }

  #bottom-left
  {
  bottom: 0;
  left: 0;
  }

  #bottom-right
  {
  bottom: 0;
  right: 0;
  }
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is no red. Four distinct green squares should appear.</p>

  <div>
  a
  <span>
   <span id="top-left"></span>
   <span id="top-right"></span>
   <span id="bottom-left"></span>
   <span id="bottom-right"></span>
   b c</span>
  d
  </div>

 </body>
</html>